import { Component } from 'react';
import './addUser.less';
import Item from '@/components/addUserItem/index';
import { Radio, Input, Select, message, Form } from 'antd';
import { connect } from 'umi';
import { IdentityItem, ApiItem, ViewItem } from '@/type/addUser';
import { addUserModelState } from '@/models/addUser';
import { Add_User } from '@/type/addUser';
import {
  _addIdentity,
  _addApi,
  _addView,
  _setIdentityApi,
  _setIdentityView,
} from '@/api/addUser';
const { Option } = Select;
interface IProps {
  getIdentity: () => void;
  getApiList: () => void;
  getListList: () => void;
  identityList: IdentityItem[];
  apiList: ApiItem[];
  viewList: ViewItem[];
  addUser: (payload: Add_User) => void;
}
interface IState {
  addUser: addUserModelState;
}
class AddUser extends Component<IProps> {
  state = {
    userType: 'add',
    //添加用户
    user_name: '', //用户名
    user_pwd: '', //密码
    identity_id: '请选择身份', //身份id
    //添加身份
    identity_text: '', //身份名称
    //添加api接口权限
    api_authority_text: '', //权限名称
    api_authority_url: '', //权限路径
    api_authority_method: '', //	该权限路径的方法
    //添加视图权限
    view_authority_text: '', //视图权限名称
    view_id: '', //视图id
    //给身份设定api接口权限
    api_identity_id: '请选择身份id',
    api_authority_id: '请选择api接口权限',
    //给身份设定view权限
    view_identity_id: '请选择身份id',
    view_authority_id: '请选择视图接口权限',
  };
  //请求数据
  componentDidMount() {
    //展示身份id数据
    this.props.getIdentity();
    this.props.getApiList();
    this.props.getListList();
  }
  //点击提交
  addUser() {
    let { user_pwd, user_name, identity_id } = this.state;
    this.props.addUser({ user_pwd, user_name, identity_id });
  }
  //下拉框改变时
  handleChange(name: string, value: string) {
    this.setState({
      [name]: value,
    });
  }
  //下拉框改变添加视图权限
  handleChangeViewId(value: string) {
    let data = value.split(',');
    this.setState({
      view_authority_text: data[1],
      view_id: data[0],
    });
  }
  //添加更新用户切换
  handleSizeChange(e: any) {
    this.setState({ userType: e.target.value });
  }
  //可控组件改变状态
  changeValue(name: string, e: any) {
    this.setState({
      [name]: e.target.value,
    });
  }
  //添加身份
  async addIdentity() {
    let { identity_text } = this.state;
    let res = await _addIdentity({ identity_text });
    if (res.data.code == 1) {
      message.success(res.data.msg);
    } else {
      message.error(res.data.msg);
    }
  }
  //添加api接口权限
  async addApi() {
    let { api_authority_text, api_authority_url, api_authority_method } =
      this.state;
    let res = await _addApi({
      api_authority_text,
      api_authority_url,
      api_authority_method,
    });
    if (res.data.code == 1) {
      message.success(res.data.msg);
    } else {
      message.error(res.data.msg);
    }
  }
  //添加视图接口权限
  async addView() {
    let { view_authority_text, view_id } = this.state;
    let res = await _addView({
      view_authority_text,
      view_id,
    });
    if (res.data.code == 1) {
      message.success(res.data.msg);
    } else {
      message.error(res.data.msg);
    }
  }
  //给身份设置api权限
  async setIdentityApi() {
    let { api_identity_id, api_authority_id } = this.state;
    let res = await _setIdentityApi({
      identity_id: api_identity_id,
      api_authority_id,
    });
    if (res.data.code == 1) {
      message.success(res.data.msg);
    } else {
      message.error(res.data.msg);
    }
  }
  //给身份设置视图权限
  async setIdentityView() {
    let { view_identity_id, view_authority_id } = this.state;
    let res = await _setIdentityView({
      identity_id: view_identity_id,
      view_authority_id,
    });
    if (res.data.code == 1) {
      message.success(res.data.msg);
    } else {
      message.error(res.data.msg);
    }
  }
  render() {
    let { identityList, apiList, viewList } = this.props;
    let {
      user_name,
      user_pwd,
      identity_id,
      identity_text,
      api_authority_text,
      api_authority_url,
      view_id,
      view_authority_text,
      api_authority_method,
      api_identity_id,
      api_authority_id,
      view_identity_id,
      view_authority_id,
    } = this.state;
    return (
      <div className="addUser">
        <p>添加用户</p>
        <div>
          <Item submit={this.addUser.bind(this)}>
            <div>
              <Radio.Group
                value={this.state.userType}
                onChange={this.handleSizeChange.bind(this)}
              >
                <Radio.Button value="add">添加用户</Radio.Button>
                <Radio.Button value="new">更新用户</Radio.Button>
              </Radio.Group>
            </div>
            <div>
              <Form.Item name="user_name" rules={[{ required: true }]}>
                <Input
                  placeholder="请输入用户名"
                  value={user_name}
                  onChange={this.changeValue.bind(this, 'user_name')}
                />
              </Form.Item>
            </div>
            <div>
              <Form.Item name="user_pwd" rules={[{ required: true }]}>
                <Input.Password
                  placeholder="请输入密码"
                  value={user_pwd}
                  onChange={this.changeValue.bind(this, 'user_pwd')}
                />
              </Form.Item>
            </div>
            <div>
              <Form.Item name="identity_id" rules={[{ required: true }]}>
                <Select
                  style={{ width: 200 }}
                  placeholder="请选择身份"
                  value={identity_id}
                  onChange={this.handleChange.bind(this, 'identity_id')}
                >
                  {identityList &&
                    identityList.map((item) => (
                      <Option key={item.identity_id} value={item.identity_id}>
                        {item.identity_text}
                      </Option>
                    ))}
                </Select>
              </Form.Item>
            </div>
          </Item>
          <Item submit={this.addIdentity.bind(this)}>
            <div>
              <Radio.Button
                value="add"
                style={{ border: '1px solid #1246FC', color: '#1246FC' }}
              >
                添加身份
              </Radio.Button>
            </div>
            <div>
              <Form.Item name="identity_text" rules={[{ required: true }]}>
                <Input
                  placeholder="请输入身份名称"
                  value={identity_text}
                  onChange={this.changeValue.bind(this, 'identity_text')}
                />
              </Form.Item>
            </div>
          </Item>
          <Item submit={this.addApi.bind(this)}>
            <div>
              <Radio.Button
                value="add"
                style={{ border: '1px solid #1246FC', color: '#1246FC' }}
              >
                添加api接口权限
              </Radio.Button>
            </div>
            <div>
              <Form.Item name="api_authority_text" rules={[{ required: true }]}>
                <Input
                  placeholder="请输入api接口权限名称"
                  value={api_authority_text}
                  onChange={this.changeValue.bind(this, 'api_authority_text')}
                />
              </Form.Item>
            </div>
            <div>
              <Form.Item name="api_authority_url" rules={[{ required: true }]}>
                <Input
                  placeholder="请输入api接口权限url"
                  value={api_authority_url}
                  onChange={this.changeValue.bind(this, 'api_authority_url')}
                />
              </Form.Item>
            </div>
            <div>
              <Form.Item
                name="api_authority_method"
                rules={[{ required: true }]}
              >
                <Input
                  placeholder="请输入api接口权限方法"
                  value={api_authority_method}
                  onChange={this.changeValue.bind(this, 'api_authority_method')}
                />
              </Form.Item>
            </div>
          </Item>
          <Item submit={this.addView.bind(this)}>
            <div>
              <Radio.Button
                value="add"
                style={{ border: '1px solid #1246FC', color: '#1246FC' }}
              >
                添加视图接口权限
              </Radio.Button>
            </div>
            <div>
              <Form.Item
                name="view_id,view_authority_text"
                rules={[{ required: true }]}
              >
                <Select
                  placeholder="请选择已有视图"
                  style={{ width: 200 }}
                  value={
                    view_id ? `${view_id},${view_authority_text}` : '请选择视图'
                  }
                  onChange={this.handleChangeViewId.bind(this)}
                >
                  {viewList &&
                    viewList.map((item) => {
                      return (
                        <Option
                          key={item.view_authority_id}
                          value={`${item.view_id},${item.view_authority_text}`}
                        >
                          {item.view_authority_text}
                        </Option>
                      );
                    })}
                </Select>
              </Form.Item>
            </div>
          </Item>
          <Item submit={this.setIdentityApi.bind(this)}>
            <div>
              <Radio.Button
                value="add"
                style={{ border: '1px solid #1246FC', color: '#1246FC' }}
              >
                给身份设置api接口权限
              </Radio.Button>
            </div>
            <div>
              <Form.Item name="api_identity_id" rules={[{ required: true }]}>
                <Select
                  placeholder="请选择身份id"
                  style={{ width: 200 }}
                  value={api_identity_id}
                  onChange={this.handleChange.bind(this, 'api_identity_id')}
                >
                  {identityList &&
                    identityList.map((item) => (
                      <Option key={item.identity_id} value={item.identity_id}>
                        {item.identity_text}
                      </Option>
                    ))}
                </Select>
              </Form.Item>
            </div>
            <div>
              <Form.Item name="api_authority_id" rules={[{ required: true }]}>
                <Select
                  placeholder="请选择api接口权限"
                  style={{ width: 200 }}
                  value={api_authority_id}
                  onChange={this.handleChange.bind(this, 'api_authority_id')}
                >
                  {apiList &&
                    apiList.map((item) => (
                      <Option
                        key={item.api_authority_id}
                        value={item.api_authority_id}
                      >
                        {item.api_authority_text}
                      </Option>
                    ))}
                </Select>
              </Form.Item>
            </div>
          </Item>
          <Item submit={this.setIdentityView.bind(this)}
          >
            <div>
              <Radio.Button
                value="add"
                style={{ border: '1px solid #1246FC', color: '#1246FC' }}
              >
                给身份设置视图权限
              </Radio.Button>
            </div>
            <div>
              <Form.Item name="view_identity_id" rules={[{ required: true }]}>
                <Select
                  placeholder="请选择身份id"
                  value={view_identity_id}
                  style={{ width: 200 }}
                  onChange={this.handleChange.bind(this, 'view_identity_id')}
                >
                  {identityList &&
                    identityList.map((item) => (
                      <Option key={item.identity_id} value={item.identity_id}>
                        {item.identity_text}
                      </Option>
                    ))}
                </Select>
              </Form.Item>
            </div>
            <div>
              <Form.Item name="view_authority_id" rules={[{ required: true }]}>
                <Select
                  placeholder="请选择视图接口权限"
                  value={view_authority_id}
                  style={{ width: 200 }}
                  onChange={this.handleChange.bind(this, 'view_authority_id')}
                >
                  {viewList &&
                    viewList.map((item) => (
                      <Option
                        key={item.view_authority_id}
                        value={item.view_authority_id}
                      >
                        {item.view_authority_text}
                      </Option>
                    ))}
                </Select>
              </Form.Item>
            </div>
          </Item>
        </div>
      </div>
    );
  }
}

export default connect(
  (state: IState) => {
    return {
      ...state.addUser,
    };
  },
  (dispathch) => {
    return {
      getIdentity() {
        dispathch({ type: 'addUser/GET_IDENTITY' });
      },
      getApiList() {
        dispathch({ type: 'addUser/GET_ApiLIST' });
      },
      getListList() {
        dispathch({ type: 'addUser/GET_VIEWLIST' });
      },
      addUser(payload: Add_User) {
        dispathch({ type: 'addUser/ADD_USER', payload });
      },
    };
  },
)(AddUser);
